<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>imagor v{{.Version}} - Upload Endpoint</title>
	<style>
		body {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
			margin: 0;
			padding: 2rem;
			min-height: 100vh;
			background: #fff;
			color: #333;
		}

		.container {
			max-width: 700px;
			margin: 0 auto;
		}

		h1 {
			text-align: center;
			font-size: 4rem;
			font-weight: 700;
			margin-bottom: 0.75rem;
			color: #333;
		}

		.version {
			text-align: center;
			font-size: 1.5rem;
			color: #666;
			margin-bottom: 2rem;
			font-weight: 400;
		}

		.path-section {
			margin-bottom: 2rem;
		}

		.path-label {
			font-weight: 500;
			color: #333;
			margin-bottom: 0.5rem;
			font-size: 1rem;
		}

		.path-url {
			width: 100%;
			padding: 0.75rem;
			background: #f8f8f8;
			border-radius: 6px;
			border: 1px solid #e0e0e0;
			font-family: 'Monaco', 'Consolas', 'Ubuntu Mono', monospace;
			overflow: auto;
			white-space: nowrap;
			margin-bottom: 0.5rem;
			font-size: 0.875rem;
			color: #333;
			box-sizing: border-box;
		}

		.path-description {
			font-size: 0.875rem;
			color: #666;
			line-height: 1.5;
		}

		.form-group {
			margin-bottom: 1.5rem;
		}

		label {
			display: block;
			margin-bottom: 0.5rem;
			font-weight: 500;
			color: #333;
			font-size: 1rem;
		}

		input[type="file"] {
			width: 100%;
			padding: 0.75rem;
			border: 1px solid #e0e0e0;
			border-radius: 6px;
			font-size: 1rem;
			background: #fff;
			color: #333;
			box-sizing: border-box;
		}

		input[type="file"]:focus {
			outline: none;
			border-color: #333;
		}

		button {
			width: 100%;
			padding: 0.75rem 1.5rem;
			background: #333;
			color: #fff;
			border: 1px solid #333;
			border-radius: 6px;
			font-size: 1rem;
			font-weight: 500;
			cursor: pointer;
			transition: opacity 0.2s ease;
		}

		button:hover:not(:disabled) {
			background: #222;
		}

		button:disabled {
			opacity: 0.8;
			cursor: not-allowed;
		}

		.loading {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
		}

		.spinner {
			width: 12px;
			height: 12px;
			border: 2px solid white;
			border-top: 2px solid #333;
			border-radius: 50%;
			animation: spin 1s linear infinite;
		}

		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}

		.help-text {
			font-size: 0.875rem;
			color: #666;
			margin-top: 0.25rem;
			line-height: 1.5;
		}

		.debug-section {
			margin-top: 2rem;
			padding-top: 2rem;
			border-top: 1px solid #e0e0e0;
		}

		.debug-label {
			font-weight: 500;
			color: #333;
			margin-bottom: 0.5rem;
			font-size: 1rem;
		}

		.debug-json {
			width: 100%;
			padding: 0.75rem;
			background: #f8f8f8;
			border-radius: 6px;
			border: 1px solid #e0e0e0;
			font-family: 'Monaco', 'Consolas', 'Ubuntu Mono', monospace;
			font-size: 0.875rem;
			color: #333;
			box-sizing: border-box;
			overflow: auto;
			white-space: pre-wrap;
			margin: 0;
		}

		@media (max-width: 768px) {
			body {
				padding: 1rem;
			}

			h1 {
				font-size: 3rem;
			}

			.path-url {
				padding: 0.5rem;
				font-size: 0.8rem;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>imagor</h1>
		<div class="version">v{{.Version}} - Upload Endpoint</div>

		<div class="path-section">
			<div class="path-label">Upload Endpoint:</div>
			<div class="path-url">{{.Path}}</div>
			{{if ne .Path "/"}}
			<div class="path-description">Your image will be processed according to the parameters in this URL path</div>
			{{end}}
		</div>

		<form method="POST" enctype="multipart/form-data" id="uploadForm">
			<div class="form-group">
				<label for="image">Select Image:</label>
				<input type="file" id="image" name="image" accept="image/*" required>
				<div class="help-text">Choose an image file to upload and process</div>
			</div>

			<button type="submit">Upload and Process</button>
		</form>

		{{if ne .Path "/"}}
		<div class="debug-section">
			<div class="debug-label">Debug - imagorpath parameters:</div>
			<pre class="debug-json">{{.Params}}</pre>
		</div>
		{{end}}

	</div>

	<script>
		// Handle form submission to prevent URL encoding issues
		document.getElementById('uploadForm').addEventListener('submit', function(e) {
			e.preventDefault(); // Prevent default form submission

			// Get the current path from the template (unencoded)
			const currentPath = '{{.Path}}';

			// Get the form data
			const formData = new FormData(this);

			// Get button and show loading state
			const button = this.querySelector('button[type="submit"]');
			const originalText = button.innerHTML;

			// Disable button and show loading
			button.disabled = true;
			button.innerHTML = '<span class="loading"><span class="spinner"></span></span>';

			// Create a new XMLHttpRequest to submit the form
			const xhr = new XMLHttpRequest();

			// Set up the request
			xhr.open('POST', currentPath, true);

			// Handle the response
			xhr.onload = function() {
				// Reset button state
				button.disabled = false;
				button.innerHTML = originalText;

				if (xhr.status === 200) {
					// Create a blob from the response
					const blob = new Blob([xhr.response], { type: xhr.getResponseHeader('Content-Type') });
					const url = window.URL.createObjectURL(blob);

					// Create a temporary link to download/view the processed image
					const a = document.createElement('a');
					a.href = url;
					a.download = 'processed-image';
					document.body.appendChild(a);
					a.click();
					document.body.removeChild(a);
					window.URL.revokeObjectURL(url);
				} else {
					alert('Upload failed: ' + xhr.status + ' ' + xhr.statusText);
				}
			};

			xhr.onerror = function() {
				// Reset button state
				button.disabled = false;
				button.innerHTML = originalText;
				alert('Upload failed: Network error');
			};

			// Set response type to handle binary data
			xhr.responseType = 'arraybuffer';

			// Send the form data
			xhr.send(formData);
		});
	</script>
</body>
</html>
